<template>
	<view v-if="show" class="maskBox" @click="maskClick">
		<swiper
			:current="current"
			class="swiper"
			@change="swiperChange"
		>
			<swiper-item class="swiperItem" v-for="(item,index) in swiperList" :key='index'>
				<image :src="item"></image>
			</swiper-item>
		</swiper>
		
		<view class="paging">
			<view class="onPage" @click.stop="onPage">
				<image src="https://xiaoqu.wuguoxin.vip/uploads/web/zuoPage.png"></image>
				上一页
			</view>
			<view class="numPage">
				<text>{{current + 1}}</text>/{{swiperList.length}}
			</view>
			<view class="onPage" @click.stop="nextPage">
				下一页
				<image src="https://xiaoqu.wuguoxin.vip/uploads/web/youPage.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{},
		data() {
			return {
				show:false,
				current:0,
				swiperList:[
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=3239156967,2142215443&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto',
					'https://img2.baidu.com/it/u=2030267577,3516802587&fm=26&fmt=auto'
				]
			}
		},
		onLoad() {},
		methods: {
			onPage(){
				if(this.current <= 0){
					this.current = 0;
				}else{
					this.current --;
				}
			},
			nextPage(){
				if(this.current >= this.swiperList.length - 1){
					this.current = this.swiperList.length - 1;
					uni.showToast({
					    title: "最后一页了",
					    icon: 'none'
					});
				}else{
					this.current++;
				}
			},
			swiperChange(e){
				this.current = e.detail.current;
				if(this.current >= this.swiperList.length - 1){
					uni.showToast({
					    title: "最后一页了",
					    icon: 'none'
					});
				}
			},
			maskClick(){
				this.show = false;
				this.current=0;
			}
		}
	}
</script>

<style scoped>
	@import url("./mask.css");
</style>
